Data Tables

Data tables are an enhanced version of an HTML table and are used to display tabular data.

BasicBasic › DefaultBasic › With striped rowsBasic › With no row hoversBasic › With a fixed layoutBasicdev ready

Preview

Code

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
  <thead>
    <tr class="slds-text-heading--label">
      <th scope="col">
        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Close Date">Close Date</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Stage">Stage</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Confidence">Confidence</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Amount">Amount</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
    </tr>
    <tr>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
    </tr>
  </tbody>
</table>

AdvancedAdvanced › DefaultAdvanced › Row SelectedAdvanced › All Rows SelectedAdvanced › Sorted AscendingAdvanced › Sorted DescendingAdvanced › Column resizedAdvanceddev ready

Preview

Code

<table class="slds-table slds-table--bordered slds-table--fixed-layout" role="grid">
  <thead>
    <tr class="slds-text-heading--label">
      <td role="gridcell" class="slds-cell-shrink" scope="col">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select All</span>
        </label>
      </td>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Opportunity Name">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Opportunity Name">Opportunity Name</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-43" class="slds-assistive-text">Opportunity Name column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-43" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Account Name">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Account Name">Account Name</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-44" class="slds-assistive-text">Account Name column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-44" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Close Date">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Close Date">Close Date</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-45" class="slds-assistive-text">Close Date column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-45" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Stage">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Stage">Stage</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-46" class="slds-assistive-text">Stage column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-46" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Confidence">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Confidence">Confidence</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-47" class="slds-assistive-text">Confidence column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-47" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Amount">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Amount">Amount</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-48" class="slds-assistive-text">Amount column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-48" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable" scope="col" aria-label="Contact">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Contact">Contact</span>
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-49" class="slds-assistive-text">Contact column width</label>
          <input class="slds-resizable__input slds-assistive-text" type="range" min="20" max="1000" id="cell-resize-handle-49" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-cell-shrink" scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <td role="gridcell" class="slds-cell-shrink" data-label="Select row Cloudhub">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select row Cloudhub</span>
        </label>
      </td>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </th>
      <td role="gridcell" data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td role="gridcell" data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td role="gridcell" data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td role="gridcell" data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td role="gridcell" data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td role="gridcell" data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
      <td role="gridcell" class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td role="gridcell" class="slds-cell-shrink" data-label="Select row Cloudhub + Anypoint Connectors">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select row Cloudhub + Anypoint Connectors</span>
        </label>
      </td>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">Cloudhub + Anypoint Connectors</div>
      </th>
      <td role="gridcell" data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td role="gridcell" data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td role="gridcell" data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td role="gridcell" data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td role="gridcell" data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td role="gridcell" data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
      <td role="gridcell" class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

ResponsiveResponsive › Stacked with Horizontal CellsResponsive › StackedResponsiveprototype

Preview

Code

<table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
  <thead>
    <tr class="slds-text-heading--label">
      <th class="slds-cell-shrink" scope="col">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select All</span>
        </label>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Close Date">
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Account Name">Account Name
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Close Date">Close Date
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Stage">Stage
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Confidence">Confidence
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Amount">Amount
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-is-sortable" scope="col">
        <div class="slds-truncate" title="Contact">Contact
          <button class="slds-button slds-button--icon-bare">
            <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </th>
      <th class="slds-cell-shrink" scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td class="slds-cell-shrink" data-label="Select Row">
        <label class="slds-checkbox">
          <input type="checkbox" name="options" />
          <span class="slds-checkbox--faux"></span>
          <span class="slds-assistive-text">Select Row</span>
        </label>
      </td>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">Cloudhub + Anypoint Connectors</div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
      <td class="slds-cell-shrink" data-label="Actions">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

When a table exceeds the width of its container, one responsive option is to wrap the table in a .slds-scrollable--x class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

Component Overview

To initialize a data table, apply the .slds-table class to the table element. This class creates a table with formatted cells and allows you to use data table utilities.

Accessibility

To create an accessible table, the top row of column headers (th) are placed in a thead. Each one receives the scope="col" attribute. The first non-actionable (meaning that doesn't contain a checkbox or menu) column in each row should be marked as a th with a scope="row" attribute.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-table
Applied to:

<table>

Outcome:

Initializes data table

Required:

Required

Comments:

--

.slds-table--bordered
Applied to:

.slds-table

Outcome:

Adds borders to the table

Required:

No, optional element or modifier

Comments:

--

.slds-table--striped
Applied to:

.slds-table

Outcome:

Adds stripes to alternating rows

Required:

No, optional element or modifier

Comments:

--

.slds-table--fixed-layout
Applied to:

.slds-table

Outcome:

Styles for resizeable columns

Required:

No, optional element or modifier

Comments:

--

.slds-is-selected
Applied to:

<tr>

Outcome:

Changes row to selected state

Required:

No, optional element or modifier

Comments:

--

.slds-is-sortable
Applied to:

<th>

Outcome:

Enables user interactions for sorting a column

Required:

No, optional element or modifier

Comments:

--

.slds-is-sortable__icon
Applied to:

<svg>

Outcome:

Arrow that indicates sorted direction

Required:

No, optional element or modifier

Comments:

--

.slds-is-sorted--asc
Applied to:

<th>

Outcome:

Makes sortable icon point up

Required:

No, optional element or modifier

Comments:

--

.slds-is-resizable
Applied to:

<th>

Outcome:

Enables table cell to be resized

Required:

No, optional element or modifier

Comments:

--

.slds-resizable
Applied to:

<div>

Outcome:

Resizing element within a table heading cell

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__input
Applied to:

<input type="range">

Outcome:

Input inside resizable element that is used for screen readers, value updates as the column width updates

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__handle
Applied to:

<span>

Outcome:

Handle the user interacts with to initiate a column resize

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__divider
Applied to:

<span>

Outcome:

Vertical indicator spanning down the table column

Required:

No, optional element or modifier

Comments:

--

.slds-th__action
Applied to:

<a>

Outcome:

Actionable area inside a table heading cell

Required:

No, optional element or modifier

Comments:

--

.slds-cell-wrap
Applied to:

<td>

Outcome:

Forces text to wrap in a cell

Required:

No, optional element or modifier

Comments:

--

.slds-cell-shrink
Applied to:

<th>, <td>

Outcome:

Shrinks cell to width of content

Required:

No, optional element or modifier

Comments:

Use if cell contains a checkbox or action menu

.slds-no-row-hover
Applied to:

.slds-table

Outcome:

Removes hover state on row

Required:

No, optional element or modifier

Comments:

Rows have a hover state by default

.slds-scrollable--x
Applied to:

parent div

Outcome:

Creates a scrollable container for a table on smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked
Applied to:

.slds-table

Outcome:

Modifies table layout by stacking cells to accommodate smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked-horizontal
Applied to:

.slds-table

Outcome:

Modifies table layout by displaying the header and row data side by side for smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

<tr>

Outcome:

Highlights action overflow ribbons on row hover

Required:

No, optional element or modifier

Comments:

When you have an overflow action menu